<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<%System.out.println(request.getAttribute("msg")); %>
<c:choose>
    <c:when test="${msg=='1' }">
        <script>alert('下单成功')</script>
    </c:when>
    <c:when test="${msg=='2' }">
        <script>alert('下单失败')</script>
    </c:when>

    <c:when test="${msg=='修改成功' }">
        <script>alert('修改成功')</script>
    </c:when>
    <c:when test="${msg=='修改失败' }">
        <script>alert('修改失败')</script>
    </c:when>

    <c:when test="${msg=='删除成功' }">
        <script>alert('删除成功')</script>
    </c:when>
    <c:when test="${msg=='删除失败' }">
        <script>alert('删除失败')</script>
    </c:when>


</c:choose>

<%
    request.setAttribute("msg","");
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="css/style_index.css"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script src="js/MyAjax.js"></script>
    <style type="text/css">
        .pagination{
            position: relative;
            left: 1400px;
            top: -42px;

        }
        @keyframes fade-in {
            0% {opacity: 0;}/*初始状态 透明度为0*/
            40% {opacity: 0;}/*过渡状态 透明度为0*/
            100% {opacity: 1;}/*结束状态 透明度为1*/
        }
        @-webkit-keyframes fade-in {/*针对webkit内核*/
            0% {opacity: 0;}
            40% {opacity: 0;}
            100% {opacity: 1;}
        }
        body {
            animation: fade-in;/*动画名称*/
            animation-duration: 1.5s;/*动画持续时间*/
            -webkit-animation:fade-in 1.5s;/*针对webkit内核*/
        }
        .m_photo{
        	width:50px;
        	height:50px;
        }
        .hand{
        	cursor :pointer ;
        }
        .table2{
        	width:98%;
        	margin: auto;
        	}
        .ab{
        	width:20px;
        	height: 20px;
        	border:2px solid #aaa;
        	margin:0 auto;
        	display: inline;
        }
    </style>
</head>
<body>
<div class="main_box">
    <h2><span></span>商品列表</h2>
    <div class="cont_box">
        <form action="#" method="post" id="staff_form">
            <div class="search_formbox clearfix">
                <button type="button" id="job" class="btn blue_btn" onclick="javascript:goPage(1)">全部商品</button>
            </div>
            <table border="0" cellspacing="0" cellpadding="0" class="table" id="table1">
                <thead>

                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品库存</th>
                    <th>商品类别</th>
                    <th>商品图片</th>
                    <th width="268">操作</th>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
            <div id="pagin" class="pagin">

            </div>
        </form>
    </div>
<h2><button id="jiesuan"  class="btn" style="text-align: center;margin-left: 45%">下单</button></h2>
<!-- 购物车 -->
<h2><span></span>购物车</h2>
<table border="0" cellspacing="0" cellpadding="0" id="gwcTable" class="table2 table">
  <thead>
    <tr>
      <th>商品</th>
      <th>单价(元)</th>
      <th>数量</th>
      <th>金额(元)</th>
      <th>删除</th>
    </tr>
  </thead>
  <tbody id="goods">
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" align="right">总计</td>
      <td id="total"></td>
      <td></td>
    </tr>
  </tfoot>
</table> 
</div>
   

<script src="js/jquery-1.10.2.js"></script>
<script>
    goPage(1);
    function goPage(cp){
    	var ctx = 'http://<%=request.getServerName() %>:8080/merchaned_photo/';
        ajax("get","merchaned?flag=findall&cp="+cp,null,function(data){
            //将JSON字符串转为js对象
            data = JSON.parse(data);
            //获取js对象中的集合
            var list = data.list;
            var tabData = "";
            var count = 0;
            for(var i = 0;i<list.length;i++){
                count++;
                tabData +="<tr>"
                tabData +="<td>"+list[i].id+"</td>"
                tabData +="<td>"+list[i].name+"</td>"
                tabData +="<td>"+list[i].money+"</td>"
                tabData +="<td>9999</td>"
                tabData +="<td>"+list[i].lb+"</td>"
                if(list[i].photo != null){
                	tabData +="<td><img  class='m_photo' src="+ ctx+list[i].photo +"></img></td>"
                }else{
                	tabData +="<td>无图片</td>"
                }
                tabData +="<td align='center'>"

                tabData +="<input type='button' value='加入购物车' onclick='add_shoppingcart(this);' class='hand table_btn table_edit edit_btn'>"

                tabData +="</td>"
                tabData += "</tr>"
            }
            //将数据写入到tbody中
            $("#tbody")[0].innerHTML = tabData;
            //调用分页列表
            getPageLink(data);
        })
    }

    //生成分页列表的函数
    function getPageLink(data){
        //拼接分页的超链接
        var ul = '<div class="message">共<i class="blue">'+data.totalPage+'</i>页，当前显示第&nbsp;<i class="blue">'+data.currentPage+'&nbsp;</i>页</div>'
        ul += ' <ul class="pagination">';
        if(data.currentPage == 1){
            ul += ' <li class="disabled"><a href="javascript:void(0)"><span class="pagepre"></span></a></li>'
        }else{
            ul += '<li><a href="javascript:goPage('+data.pre+')"><span class="pagepre"></span></a></li>'
        }
        for(var i=1;i<=data.totalPage;i++){
            if(i == data.currentPage){
                ul += '<li class="active"><a href="javascript:goPage('+i+');" style="width:25px;height:28px">'+i+'</a></li>'
            }else{
                ul += '<li><a href="javascript:goPage('+i+');">'+i+'</a></li>'
            }
        }
        if(data.currentPage == data.totalPage){
            ul += '<li class="disabled"><a href="javascript:void(0);"><span class="pagenxt"></span></a></li>'
        }else{
            ul += '<li><a href="javascript:goPage('+data.next+')"><span class="pagenxt"></span></a></li>'
        }
        ul += '</ul>';

        $('#pagin')[0].innerHTML = ul;
    }



    
    
    /* 购物车逻辑开始 */
	function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象
    	//先获取商品名字和单价还有库存以备后面使用
    	var $tds = $(btn).parent().siblings();
        //$tds.eq(0)是jQuery对象  $tds[0]是DOM对象
    	var name = $tds.eq(1).html();//string
    	var price = $tds.eq(2).html();//string
    	var stock = $tds.eq(3).html();//string
    	
    	//查看库存是否还有<=0
    	if(stock <= 0){
    	  return;	
    	}
    	//无论购物车中是否有该商品,库存都要-1
    	$tds.eq(3).html(--stock);
    	//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行
    	var $trs = $("#goods>tr");
    	for(var i=0;i<$trs.length;i++){
    	  var $gtds = $trs.eq(i).children();
    	  var gName = $gtds.eq(0).html();
    	  if(name == gName){//若存在
    		var num = parseInt($gtds.eq(2).children().eq(1).val());
    		$gtds.eq(2).children().eq(1).val(++num);//数量+1
    		//金额从新计算
    		$gtds.eq(3).html(price*num);
    		return;//后面代码不再执行
    	  }
    	}
    	//若不存在,创建后追加
    	var li =
    	  "<tr>"+
            "<td>"+name+"</td>"+
            "<td>"+price+"</td>"+
            "<td align='center'>"+
              "<input class='ab' type='button' value='-' onclick='decrease(this);'/> "+
              "<input style='display: inline;' type='text' size='3' readonly value='1'/> "+
              "<input class='ab' type='button' value='+' onclick='increase(this);'/>"+
            "</td>"+
            "<td>"+price+"</td>"+
            "<td align='center'>"+
              "<input class='ab' type='button' value='x' onclick='del(this);'/>"+
            "</td>"+
          "</tr>";
    	//追加到#goods后面
    	$("#goods").append($(li));
    	//总计功能
    	total();
      }
    
	 //辅助方法--单击购物车中的"+"  "-"  "x"按钮是找到相关商品所在td,以jQuery对象返回
    function findStock(btn){
  	var name = $(btn).parent().siblings().eq(0).html();//获取商品名字
  	
  	//注意table默认有行分组,若此处使用 $("#table1>tr:gt(1)")则找不到任何tr
  	var $trs = $("#table1>tbody>tr:gt(0)");
  	for(var i=0;i<$trs.length;i++){
  	  var fName = $trs.eq(i).children().eq(1).html();
  	  console.info($trs.eq(i).children());
  	  console.info(fName);
  	  if(name == fName){//找到匹配的商品
  		return $trs.eq(i).children().eq(3);
  	  }
  	}
    }
    
    //增加"+"功能
    function increase(btn){
  	//获取该商品库存看是否<=0
  	var $stock = findStock(btn);
  	var stock = $stock.html();
  	if(stock <= 0){
  	  return;
  	}
  	//库存-1  
  	$stock.html(--stock);
  	//购物车数据改变
  	var $td = $(btn).prev();
  	var num = parseInt($td.val());//number
  	//num此时为number类型(在计算时会自动转换为number类型)
  	$td.val(++num);
  	//获取单价,再加计算前要先转换为number类型
  	var price = parseInt($(btn).parent().prev().html());
  	$(btn).parent().next().html(num*price);
  	
  	//总计功能
  	total();
    }
    
    //减少"-"功能
    function decrease(btn){
  	//该商品数量=1时候不能再减少
  	var num = parseInt($(btn).next().val());
  	if(num <= 1){
  	  return;	
  	}
  	var $stock = findStock(btn);
  	//库存+1
  	var stock = $stock.html();
  	$stock.html(++stock);
  	//商品数量-1
  	$(btn).next().val(--num);
  	//从新计算金额
  	var price = parseInt($(btn).parent().prev().html());
  	$(btn).parent().next().html(price*num);
  	
  	//总计功能
  	total();
    }
    
    //"x"删除按钮功能
    function del(btn){
  	//将商品数量归还库存
  	var $stock = findStock(btn);
  	var stock = parseInt($stock.html());
  	var num = parseInt($(btn).parent().prev().prev().children().eq(1).val());
  	$stock.html(num + stock);
  	//清空改行商品列表
  	$(btn).parent().parent().remove();
  	
  	//总计功能
  	total();
    }
  //总计功能
  function total(){
    //获取所有购物车中的trs
    var $trs = $("#goods tr");
    var amount = 0;
    for(var i=0;i<$trs.length;i++){
  	var money = parseInt($trs.eq(i).children().eq(3).html());
  	amount += money;
    }
    //写入总计栏
    $("#total").html(amount);
  }
  //下单拼接参数为list格式,
  $('#jiesuan').click(function(){
	  var list=new Array();
	  $('#gwcTable tr').each(function(i){ 
		  var json = new Array();
		   $(this).children('td').each(function(j){
			   json[j] = $(this).text();
		  }); 
		   list[i] = json;
	  });
	  list.shift();
	  location.href="merchaned?flag=xd&list=" + list + "&id=" + ${emp.id};
  });
</script>
</body>
</html>